<template>
  <div>
		<crumbs :BreadCrumb="BreadCrumb"></crumbs>
    <el-button type="primary" size="medium" @click="adddinglog()">添加</el-button>
    <el-table class="el_tab"
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="hospitalCode"
        label="医院编码"
        width="150">
      </el-table-column>
      <el-table-column
        fixed
        prop="hospitalName"
        label="医院名称"
        width="250">
      </el-table-column>
      <el-table-column
        prop="province"
        label="医院性质"
        width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.property ==1">公立</span>
          <span v-if="scope.row.property ==2">民营</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="levels"
        label="医院级别"
        width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.levels ==1">普通</span>
          <span v-if="scope.row.levels ==2">二级</span>
          <span v-if="scope.row.levels ==3">甲</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="医院地址"
        width="300">
      </el-table-column>
      <el-table-column
        prop="descr"
        label="医院简介"
        width="220">
      </el-table-column>
      <el-table-column
        prop="feature"
        label="特色科室"
        width="220">
      </el-table-column>
      <el-table-column
        prop="editTime"
        label="日期时间"
        width="160">
        <template slot-scope="scope">
          <span>{{formatTimes(scope.row.editTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="remove(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="800px" class="top_dialog">
      <el-form :model="form" :rules="rules" label-position="left" ref="ruleForm">
        <div class="add_info">
          <div class="info_l">
            <div>
              <span>医院基本信息</span>
              <el-divider></el-divider>
            </div>
            <div>
              <el-form-item label="医院名称" :label-width="formLabelWidth" prop="hospitalName">
                <el-input v-model="form.hospitalName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="医院代码" :label-width="formLabelWidth" prop="hospitalCode">
                <el-input v-model="form.hospitalCode" autocomplete="off"></el-input>
              </el-form-item>
              <div class="info_sel">
                <el-form-item label="医院性质" :label-width="formLabelWidth" prop="property">
                  <el-select v-model="form.property" placeholder="请选择医院性质">
                    <el-option label="公立" value="1"></el-option>
                    <el-option label="民营" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item class="info_sel_r" label="医院级别" :label-width="formLabelWidth" prop="levels">
                  <el-select v-model="form.levels" placeholder="请选择医院级别">
                    <el-option label="普通" value="1"></el-option>
                    <el-option label="二级" value="2"></el-option>
                    <el-option label="甲" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <el-form-item label="医院地址" :label-width="formLabelWidth" prop="address">
                <el-input v-model="form.address" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="医院简介" :label-width="formLabelWidth" prop="descr">
                <el-input type="textarea" v-model="form.descr"></el-input>
              </el-form-item>
              <el-form-item label="特色科室" :label-width="formLabelWidth" prop="feature">
                <el-input type="textarea" v-model="form.feature"></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- <div class="info_r">
            <div>
              <span>附件</span>
              <el-divider></el-divider>
            </div>
            <div>
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">添加营业执照</el-button>
                <div slot="tip" class="el-upload__tip"></div>
              </el-upload>
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">添加资质文件</el-button>
                <div slot="tip" class="el-upload__tip"></div>
              </el-upload>
            </div>
          </div> -->
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addinsert('ruleForm')">保 存</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
  import crumbs from "../../views/Crumbs.vue";
import Template_slot from '../../views/template_slot.vue';
  export default {
    name:'',
    components:{
      crumbs,
        Template_slot
    },
    data(){
      return{
        title:'',
        BreadCrumb:[
          {path:'',name:'基础管理'},
          {path:'/basic/hospital',name:'医院信息'}
        ],
        dialogFormVisible:false,
        tableData:[],
        formLabelWidth:'80px',
        form:{
          hospitalCode:'',
          hospitalName:'',
          property:'',
          levels:'',
          address:'',
          descr:'',
          feature:'',
        },
        rules:{
          hospitalCode:[{ required: true, message: '请输入医院代码', trigger: 'blur' }],
          hospitalName:[{ required: true, message: '请输入医院名称', trigger: 'blur' }],
          property:[{ required: true, message: '请选择医院性质', trigger: 'change' }],
          levels:[{ required: true, message: '请选择医院级别', trigger: 'change' }],
          address:[{ required: true, message: '请输入医院地址', trigger: 'blur' }],
          descr:[{ required: true, message: '请输入医院简介', trigger: 'blur' }],
          feature:[{ required: true, message: '请输入特色科室', trigger: 'blur' }],
        },
        pageSize:10,
        pageNo:1,
        total:0,
        id:null,
      }
    },
    created(){
      this.getqueryPbHospitalList()
    },
    methods:{
      // 添加表单的弹框
      adddinglog(){
        this.id = null
        this.title = '添加医院信息'
        this.dialogFormVisible = true
        this.form = {
          hospitalCode:'',
          hospitalName:'',
          property:'',
          levels	:'',
          address:'',
          descr:'',
          feature:'',
        }
      },
      // 添加医院信息
      addinsert(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.id ==null){
              this.$axios.addinsert({
                ...this.form
              }).then(res=>{
                if(res.code == '00000'){
                  this.$message({
                    type:'success',
                    message:res.msg
                  })
                  this.dialogFormVisible = false
                  this.getqueryPbHospitalList()
                  }
                console.log(res)
              })
            }else{
              this.$axios.selupdate({
                id:this.id,
                hospitalCode:this.form.hospitalCode,
                hospitalName:this.form.hospitalName,
                property:this.form.property,
                levels:this.form.levels,
                address:this.form.address,
                descr:this.form.descr,
                feature:this.form.feature,
              }).then(res=>{
                if(res.code =='00000'){
                  this.$message({
                    type:'success',
                    message:res.msg
                  })
                  this.dialogFormVisible = false
                  this.getqueryPbHospitalList()
                }
                console.log(res)
              })
            }
          } else {

          }
        })
      },
      // 查询医院信息列表
      getqueryPbHospitalList(){
        this.$axios.getqueryPbHospitalList({
          pageSize:this.pageSize,
          pageNo:this.pageNo,
        }).then(res=>{
          if(res.code =='00000'){
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },
      // 编辑
      handleClick(row){
        this.title = '编辑医院信息'
        this.dialogFormVisible=true
        this.$axios.getqueryById({
          id:row.id
        }).then(res=>{
          if(res.code == '00000'){
            this.id = res.data.id
            this.form = res.data
            this.form.property = String(res.data.property)
          }
          console.log(res)
        })
      },
      // 列表删除
      remove(row){
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.deleteById({
            id:row.id
          }).then(res=>{
            console.log(res)
            if(res.code == '00000'){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getqueryPbHospitalList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 每页几条
      handleSizeChange(val){
        this.pageSize = val
        this.getqueryPbHospitalList()
      },
      // 第几页
      handleCurrentChange(val) {
        this.pageNo = val
        this.getqueryPbHospitalList()
      }
    }

  }
</script>

<style scoped>
  .el_tab{
    margin-top: 20px;
  }
  .add_info{
    display: flex;
    padding:0px 100px;

  }
  .info_l{
    text-align: left;
    flex: 1;
  }
  .info_r{
    text-align: left;
    flex: 1;
    margin-left: 30px;
  }
  .info_sel{
    display: flex;
  }
  .info_sel_r{
    margin-left: 20px;
  }
  .top_dialog /deep/ .el-dialog__body{
    padding:0px !important;
  }
  .block{
    text-align: center;
    margin-top: 10px;
    /* margin:0px auto; */
  }
</style>
